<template>
  <div id="learn_course">
    <div class="sub-li">
      <div class="sub-li-right">
        <div>
          <div class="company_img">
            <img style="width:100%;height:108px;"
                 src="https://s0.lgstatic.com/i/image6/M01/58/F5/Cgp9HWFC18mAO7D-AAGaew0BPXY393.png"
                 alt="">
          </div>
          <div class="company-info">
            <h3>24讲吃透分布式数据库</h3>
            <p class="company_text">
              陈磊
              <el-divider direction="vertical"></el-divider>
              前京东测试架构师
            </p>
            <div class="course_introduce">
              Java开发岗高频面试题全解析，专刊正文共计31节，已经全部更新完毕。专刊分9个模块来对Java岗位面试中的知识点进行解析，包括通用面试技能，Java基础，Java进阶，网络协议，常见框架以及算法，设计模式等。专刊串点成面的解析每个面试题背后的技术原理，由浅入深，循序渐进，力争让大家掌握面试题目的背后的技术原理，
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="sub-li">
      <div class="sub-li-right">
        <div>
          <div class="company_img">
            <img style="width:100%;height:108px;"
                 src="https://s0.lgstatic.com/i/image6/M01/58/F5/Cgp9HWFC18mAO7D-AAGaew0BPXY393.png"
                 alt="">
          </div>
          <div class="company-info">
            <h3>24讲吃透分布式数据库</h3>
            <p class="company_text">
              陈磊
              <el-divider direction="vertical"></el-divider>
              前京东测试架构师
            </p>
            <div class="course_introduce">
              Java开发岗高频面试题全解析，专刊正文共计31节，已经全部更新完毕。专刊分9个模块来对Java岗位面试中的知识点进行解析，包括通用面试技能，Java基础，Java进阶，网络协议，常见框架以及算法，设计模式等。专刊串点成面的解析每个面试题背后的技术原理，由浅入深，循序渐进，力争让大家掌握面试题目的背后的技术原理，
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        align="center"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :hide-on-single-page="value"
        style="padding-top: 15px"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "LearnCourse",
  data(){
    return{
      value:true,
      currentPage:1,
      total:10,
      pageSize:30,
    }
  },
  methods:{
    handleCurrentChange(currentPage){
      this.currentPage = currentPage;
    }
  }
}
</script>

<style scoped>
#learn_course {
  background-color: white;
  padding: 20px;
  box-shadow: 0 5px 5px 0 #eceaea;
  min-height: 464px;
}
.sub-li {
  margin-bottom:20px;
  box-shadow: 2px 3px 0 2px rgb(0 0 0 / 10%);
}
p {
  margin: 0 0;
}

.name {
  display: inline-block;
  font-size: 18px;
  color: #428af5;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salary {
  width: 20%;
  height: 30px;
  line-height: 30px;
  text-align: left;
  display: inline-block;
  color: #fc6c38;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-text {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #8d92a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-divider--horizontal {
  height: 0.5px;
  margin: 5px 0 5px 0;
}


.company-info {
  display: inline-block;
  height: 120px;
  margin-left: 16px;
  width:520px;
  overflow: hidden;

}
.delivery_tag{
  display: inline-block;
  float:right;
}
.company-info h3 {
  height: 22px;
  font-size: 18px;
  font-weight: 400;
  color: #428af5;
  line-height: 22px;
  margin: 0 0 7px 0;
  padding: 0;
}

.company_text {
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #8d92a1;
  position: relative;
}
.course_introduce{
  height: 50px;
  font-size: 13px;
  color: #8d92a1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
  -webkit-line-clamp: 3;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;

}
.company_img {
  display: inline-block;
  height: 108px;
  width: 200px;
  line-height: 60px;
  text-align: center;
  overflow: hidden;
  float: left;
}
</style>